import { Empty, Row, Col } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { useModel } from "umi";

import OrganizationApplications from "../components/application/OrganizationWaitOnline";
import PersonApplications from "../components/application/PersonWaitOnline";
import ToolsApplicationsWaitOnline from "../components/application/ToolsWaitOnline";

import useOrganizationWaitOnline from "../hooks/application/organization/useWaitOnline";
import usePersonWaitOnline from "../hooks/application/person/useWaitOnline";
import useToolsWaitOnline from "../hooks/application/tools/useWaitOnline";

const WaitingOnlineApplicationsPage = () => {
    const { windowInnerHeight } = useModel("global");

    const { applications: organizationApplications, loadWaitOnlineApplications: loadWaitOnlineOrganizationApplications } = useOrganizationWaitOnline();
    const { applications: personApplications, loadWaitOnlineApplications: loadWaitOnlinePersonApplications } = usePersonWaitOnline();
    const { applications: toolsApplications, loadWaitOnlineApplications: loadWaitOnlineToolsApplications } = useToolsWaitOnline();

    const cardBodyHeight = windowInnerHeight - 90 - 54 - 20;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={8}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 16 }}>待上线组织应用</span>}
                        headerExtraContent={
                            <ButtonGroup>
                                <Button icon={<IconRefresh />} onClick={loadWaitOnlineOrganizationApplications} />
                            </ButtonGroup>
                        }
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        bodyStyle={{ padding: "10px 16px", height: cardBodyHeight, overflow: "auto" }}
                    >
                        {organizationApplications.length > 0 ? (
                            <OrganizationApplications applications={organizationApplications} loadWaitOnlineApplications={loadWaitOnlineOrganizationApplications} />
                        ) : (
                            <Empty />
                        )}
                    </SemiCard>
                </Col>
                <Col span={8}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 16 }}>待上线个人应用</span>}
                        headerExtraContent={
                            <ButtonGroup>
                                <Button icon={<IconRefresh />} onClick={loadWaitOnlinePersonApplications} />
                            </ButtonGroup>
                        }
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        bodyStyle={{ padding: "10px 16px", height: cardBodyHeight, overflow: "auto" }}
                    >
                        {personApplications.length > 0 ? (
                            <PersonApplications applications={personApplications} loadWaitOnlineApplications={loadWaitOnlinePersonApplications} />
                        ) : (
                            <Empty />
                        )}
                    </SemiCard>
                </Col>
                <Col span={8}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 16 }}>待上线工具应用</span>}
                        headerExtraContent={
                            <ButtonGroup>
                                <Button icon={<IconRefresh />} onClick={loadWaitOnlineToolsApplications} />
                            </ButtonGroup>
                        }
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        bodyStyle={{ padding: "10px 16px", height: cardBodyHeight, overflow: "auto" }}
                    >
                        {toolsApplications.length > 0 ? (
                            <ToolsApplicationsWaitOnline applications={toolsApplications} loadWaitOnlineApplications={loadWaitOnlineToolsApplications} />
                        ) : (
                            <Empty />
                        )}
                    </SemiCard>
                </Col>
            </Row>
        </div>
    );
};

export default WaitingOnlineApplicationsPage;
